<template>
  <div class="container-subjects">
    <el-card>
      <!-- 学科首栏 -->
      <el-row>
        <!-- 学科搜索 -->
        <el-col :span="18">
          <el-form inline size="small">
            <el-form-item class="sub-name">学科名称</el-form-item>
            <el-form-item>
              <el-input
                ref="subNameInput"
                v-model="dataParams.subjectName"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="cleanSubName">清除</el-button>
              <el-button type="primary" @click="searchSubName">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 新增学科 -->
        <el-col :span="6">
          <el-button
            style="float: right"
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="() => (showAddSub = true)"
          >
            新增学科
          </el-button>
        </el-col>
      </el-row>
      <!-- 数据总数 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 数据列表 -->
      <el-table :data="subList" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="props">
            {{ props.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="props">
            {{ props.row.isFrontDisplay ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="240px">
          <template slot-scope="props">
            <el-link type="primary" @click="toDirectorys(props.row)"
              >学科分类</el-link
            >
            <el-link type="primary" @click="toTags(props.row)"
              >学科标签</el-link
            >
            <el-link type="primary" @click="editSub(props.row)">修改</el-link>
            <el-link type="primary" @click="deletSub(props.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="float: right; margin: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="dataParams.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="100"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加学科弹层 -->
    <el-dialog
      width="28%"
      :visible="showAddSub"
      :title="addSubParams.id ? '修改学科' : '新增学科'"
      @close="btnCancle"
    >
      <el-form ref="addSubForm" :model="addSubParams" label-width="80px">
        <el-form-item
          prop="subjectName"
          :rules="[
            { required: true, message: '请输入学科名称', trigger: 'blur' }
          ]"
          label="学科名称"
        >
          <el-input v-model="addSubParams.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="addSubParams.isFrontDisplay"
          ></el-switch>
        </el-form-item>
      </el-form>
      <!-- footer -->
      <div slot="footer">
        <el-button @click="btnCancle">取 消</el-button>
        <el-button type="primary" @click="btnOK">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, remove, update } from '@/api/hmmm/subjects'
export default {
  name: 'Subjects',
  data() {
    return {
      // 请求学科列表参数
      dataParams: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 新增学科参数
      addSubParams: {
        subjectName: '',
        isFrontDisplay: 1
      },
      subList: [], // 学科列表数据
      total: 0, // 学科数据总数
      showAddSub: false // 添加学科弹层控制
    }
  },
  created() {
    this.getSubList()
  },
  methods: {
    // 获取学科列表数据
    async getSubList() {
      const { data } = await list(this.dataParams)
      this.subList = data.items
      this.total = data.counts
    },
    // 响应每页条数改变
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.dataParams.pagesize = pageSize
      this.getSubList()
    },
    // 响应页数改变
    handleCurrentChange(page) {
      this.dataParams.page = page
      this.getSubList()
    },
    // 点击清除按钮，清空关键字输入框。
    cleanSubName() {
      this.dataParams.subjectName = ''
      // 清除之后仍获取焦点
      this.$refs.subNameInput.focus()
    },
    // 点击筛选按钮，按照用户输入的**学科名称**且回到第一页进行查询，更新列表。
    searchSubName() {
      this.dataParams.page = 1
      this.getSubList()
    },
    // 新增学科弹层取消
    btnCancle() {
      this.showAddSub = false
      // 弹层退出动画有延时效果，延迟更新数据配合动画
      setTimeout(() => {
        this.addSubParams = {}
      }, 500)
    },
    // 新增、修改学科弹层确认
    async btnOK() {
      try {
        await this.$refs.addSubForm.validate()
        if (this.addSubParams.id) {
          // 修改成功后：提示“修改学科成功”+更新当前列表
          await update(this.addSubParams)
          this.$message.success('修改学科成功')
        } else {
          // 新增成功后：提示“新增学科成功”+回到第一页更新列表。
          await add(this.addSubParams)
          this.$message.success('新增学科成功')
        }
        this.getSubList()
      } catch (err) {
        this.$message('校验失败, 请重试')
      }
      this.btnCancle()
      this.getSubList()
    },
    // 修改学科
    editSub(row) {
      this.addSubParams = row
      this.showAddSub = true
    },
    // 删除学科
    async deletSub(row) {
      try {
        // 如果操作成功：提示“删除成功”+更新当前列表
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.getSubList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (err) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 跳转到目录
    toDirectorys(row) {
      const { id, subjectName: name } = row
      this.$router.push({
        path: 'directorys',
        query: { id, name }
      })
    },
    // 跳转到目录
    toTags(row) {
      const { id, subjectName: name } = row
      this.$router.push({
        path: 'tags',
        query: { id, name }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.sub-name {
  font-weight: 800;
}
.el-link {
  margin-right: 10px;
}
</style>
